<template>
  <div id="editor">

  </div>
  <div id="toolbar">
    <span class="ql-formats">
      <select class="ql-size"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>
      <button class="ql-underline"></button>
      <button class="ql-strike"></button>
    </span>
    <span class="ql-formats">
      <select class="ql-color"></select>
      <select class="ql-background"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-script" value="sub"></button>
      <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-header" value="1"></button>
      <button class="ql-header" value="2"></button>
      <button class="ql-blockquote"></button>
      <button class="ql-code-block"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-indent" value="-1"></button>
      <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
<!--      <button class="ql-direction" value="rtl"></button>-->
      <select class="ql-align"></select>
    </span>
    <span class="ql-formats">
      <button class="ql-link"></button>
      <button class="ql-image"></button>
      <!--      <button class="ql-video"></button>-->
      <button class="ql-formula"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-clean"></button>
    </span>
  </div>
</template>

<script>
import {QuillDeltaToHtmlConverter} from "quill-delta-to-html";

export default {
  name: "qulEdit",
  mounted() {
    Quill.register('modules/image', true)
    var quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar'
      }
    });
    this.quillIns = quill
  },
  methods:{
    covert2Html(){
      var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
      var deltaOps = this.quillIns.getContents().ops
      for (let i = 0; i < deltaOps.length; i++) {
        if (typeof(deltaOps[i].insert)=='string'){
          deltaOps[i].insert = deltaOps[i].insert.replaceAll(/</g,"").replaceAll(/>/g,"")
        }
      }
      const item = document.querySelector('#editor div')
      item.innerHTML = ''
      console.log(deltaOps)
      var cfg = {};
      var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
      var html = converter.convert();
      return html
    }
  }
}
</script>

<style scoped>

</style>